<template>
  <h1>Button 按钮</h1>
  <p>常用的操作按钮。</p>
  <h2>基础用法</h2>
  <p>基础的按钮用法</p>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-button>默认按钮</az-button>
        <az-button type="primary">主要按钮</az-button>
        <az-button type="success">成功按钮</az-button>
        <az-button type="danger">危险按钮</az-button>
        <az-button type="warning">警告按钮</az-button>
      </div>
      <div class="demo-block-content-row">
        <az-button round>圆角按钮</az-button>
        <az-button type="primary" round>主要按钮</az-button>
        <az-button type="success" round>成功按钮</az-button>
        <az-button type="danger" round>危险按钮</az-button>
        <az-button type="warning" round>警告按钮</az-button>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example1 }}</code></pre>
    </div>
  </div>
  <h2>禁用状态</h2>
  <p>按钮不可用状态</p>
  <div class="demo-block">
    <div class="demo-block-content">
      <div class="demo-block-content-row">
        <az-button @click="handleClick">默认按钮</az-button>
        <az-button disabled @click="handleClick">禁用按钮</az-button>
      </div>
    </div>
    <div class="demo-block-code">
      <pre><code class="language-html">{{ example2 }}</code></pre>
    </div>
  </div>
</template>

<script setup>
let example1 = `<az-button>默认按钮</az-button>
<az-button type="primary">主要按钮</az-button>
<az-button type="success">成功按钮</az-button>
<az-button type="danger">危险按钮</az-button>
<az-button type="warning">警告按钮</az-button>

<az-button round>圆角按钮</az-button>
<az-button type="primary" round>主要按钮</az-button>
<az-button type="success" round>成功按钮</az-button>
<az-button type="danger" round>危险按钮</az-button>
<az-button type="warning" round>警告按钮</az-button>`
let example2 = `<az-button @click="handleClick">默认按钮</az-button>
<az-button disabled @click="handleClick">禁用按钮</az-button>`

const handleClick = () => {
  alert('触发按钮点击事件')
}
</script>

<style scoped></style>
